<template>
  <div class="flow_main">
    <div class="flow_box_concourse">
      <div class="flow_box_all_title">
        <img src="../../assets/images/huizong.png">
        <div>总汇</div>
      </div>
      <div class="flow_box_all_val_concourse" v-loading="loading">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <div v-if="!loading">
            <el-tab-pane label="今日" name="1">
              <el-row>
                <el-col :span="12" class="statistic_title">今日流量</el-col>
                <el-col :span="12" class="statistic_title">昨日流量</el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="statistic_card" style="margin-left: 5px;">
                    <el-statistic :value="counts[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          浏览量(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/liulanliang.png" style="width: 60px;height: 60px;">
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="statistic_card">
                    <el-statistic :value="newHumans[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          新增用户人数(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/adduser.png" style="width: 60px;height: 60px;">
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="statistic_card">
                    <el-statistic :value="yestodatCounts[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          浏览量(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/liulanliang.png" style="width: 60px;height: 60px;">
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="statistic_card">
                    <el-statistic :value="yestodayNewHumans[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          新增用户人数(人)
                        </div>
                      </template>

                    </el-statistic>
                    <img src="../../assets/images/adduser.png" style="width: 60px;height: 60px;">
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="最近7天" name="2">
              <el-row class="statistic_title">最近7天流量</el-row>
              <el-row>
                <el-col :span="12">
                  <div class="statistic_card_manyday" style="margin-left: 5px;">
                    <el-statistic :value="counts[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          浏览量(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/liulanliang.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="statistic_card_manyday">
                    <el-statistic :value="newHumans[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          新增用户人数(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/adduser.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="最近30天" name="3">
              <el-row class="statistic_title">最近30天流量</el-row>
              <el-row>
                <el-col :span="12">
                  <div class="statistic_card_manyday" style="margin-left: 5px;">
                    <el-statistic :value="counts[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          浏览量(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/liulanliang.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="statistic_card_manyday">
                    <el-statistic :value="newHumans[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          新增用户人数(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/adduser.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="最近1年" name="4">
              <el-row class="statistic_title">最近1年流量</el-row>
              <el-row>
                <el-col :span="12">
                  <div class="statistic_card_manyday" style="margin-left: 5px;">
                    <el-statistic :value="counts[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          浏览量(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/liulanliang.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="statistic_card_manyday">
                    <el-statistic :value="newHumans[0]">
                      <template #title>
                        <div class="statistic_card_title">
                          新增用户人数(人)
                        </div>
                      </template>
                    </el-statistic>
                    <img src="../../assets/images/adduser.png" style="width: 80px;height: 80px;">
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </div>
        </el-tabs>
      </div>
    </div>
    <div class="flow_box_figure">
      <div class="flow_box_figure_val" v-loading="loadingChart">
        <el-tabs v-model="activeName1" type="card" class="demo-tabs" @tab-click="handleClick1">
          <el-tab-pane label="最近7天" name="1"></el-tab-pane>
          <el-tab-pane label="最近30天" name="2"></el-tab-pane>
          <el-tab-pane label="最近1年" name="3"></el-tab-pane>
        </el-tabs>
        <div ref="myChart" id="myChart" :style="{ width: '2200px', height: '500px' }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import * as echarts from "echarts";
import { postgetNumber,postgetChart } from "@/api/flowPool.js"
const searchParams = reactive({
  dateType:'1'
})
const loading = ref(false)
const loadingChart = ref(false)
const activeName = ref('1')
const activeName1 = ref('1')
let counts = reactive([])
let yestodatCounts = reactive([])
let yestodayNewHumans = reactive([])
let newHumans = reactive([])
let dataTime = reactive([])
let pageView = reactive([])
let addUser = reactive([])

const initEcharts = async (tab) => {
  console.log(tab, '111111111111');
  // await getTableList(tab);
  const dom = document.getElementById('myChart');
  const myChart = echarts.init(dom);
  const option = {
    title: {
      text: '流量对比图',
      left: 40,
      textStyle: {
        fontSize: 25,
        fontWeight: 600,
      },
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['浏览量', '新增用户'],
      right: 80,
    },
    grid: {
      left: '2%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dataTime,
      axisLabel: {
        fontSize: 15, // 设置 x 轴刻度标签字体大小
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: 17, // 设置 y 轴刻度标签字体大小
      },
    },
    series: [
      {
        name: '浏览量',
        type: 'line',
        data: pageView,
        smooth: true,
        color: '#5D77FF',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#5D77FF' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      {
        name: '新增用户',
        type: 'line',
        data: addUser,
        smooth: true,
        color: '#F0A432',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#F0A432' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
    ]
  };
  myChart.setOption(option);
}

const fetchData = async () => {
  try {
    loading.value = true
    counts.length = 0
    newHumans.length = 0
    searchParams.dateType = activeName.value
    const data = await postgetNumber(searchParams)
    counts.push(data.data.counts)
    newHumans.push(data.data.newHumans)
    yestodatCounts.push(data.data.yestodatCounts)
    yestodayNewHumans.push(data.data.yestodayNewHumans)
    console.log(counts)
  }
  catch (error){
    console.log(error)
  }
  finally {
    loading.value = false
  }
}
const fetchChartData = async () => {
  try {
    loadingChart.value = true
    dataTime.length = 0
    pageView.length = 0
    addUser.length = 0
    searchParams.dateType = activeName1.value
    const data = await postgetChart(searchParams)
    if(activeName1.value === "3"){
      data.data.forEach(item => {
        dataTime.push(item.months)
      })
    }
    else {
      data.data.forEach(item => {
        dataTime.push(item.loginTime)
      })
    }
    data.data.forEach(item => {
      pageView.push(item.sum)
    })
    data.data.forEach(item => {
      addUser.push(item.newsSum)
    })
    console.log(dataTime)
    await initEcharts();
  }
  catch (error){
    console.log(error)
  }
  finally {
    loadingChart.value = false
  }
}
const handleClick = async (tab) => {
  try {
    activeName.value = tab.props.name;
    await fetchData();
  }
  catch (error){
    console.log(error)
  }
}
const handleClick1 = async (tab) => {
  try {
    activeName1.value = tab.props.name;
    await fetchChartData()
  }
  catch (error){
    console.log(error)
  }
}
onMounted( async () => {
  await fetchData()
  await fetchChartData()
})

</script>

<style scoped>
.flow_box_all_title {
  margin-bottom: 20px;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
}

.flow_box_all_val_concourse {
  width: auto;
  height: 200px;

}

.flow_box_all_val {
  width: auto;
  height: 400px;

}

.flow_main {
  padding: 50px 50px 80px 50px;
  background-color: #FFFFFF;
}

.flow_box_concourse {
  width: auto;
  height: 320px;
  margin-bottom: 30px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 20px;
}

.flow_box_all {
  width: auto;
  height: 450px;
  margin-bottom: 30px;
  border: 2px solid #ddd;
  padding: 60px;
}

.flow_box_figure {
  width: auto;
  height: 550px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 35px 10px 10px 35px;
}

.flow_box_figure_val {
  width: auto;
  height: 550px;

}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic_card {
  height: 50%;
  padding: 20px;
  border-radius: 4px;
  margin-top: 25px;
  background-color: #FFFFFF;
  width: 80%;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  display: flex;
  justify-content: space-between;
}

.statistic_card_title {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  margin-bottom: 20px;
}

.statistic_card_manyday {
  height: 50%;
  padding: 20px;
  border-radius: 4px;
  margin-top: 25px;
  background-color: #FFFFFF;
  width: 80%;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  display: flex;
  justify-content: space-between;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}


.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.statistic_title {
  margin-top: 15px;

}
</style>